import React, {useContext, useEffect} from 'react';
import {Card, CardContent, CardHeader, Chip, IconButton, Stack, Typography} from "@mui/material";

import {unconfirmedCount} from "../../api/lesson/lesson-schedule";
import CircularProgress from "@mui/material/CircularProgress";
import RefreshIcon from "@mui/icons-material/Refresh";

import {lessonComplete, MyContext} from "../../menu";

function UnconfirmedCount() {

    const {handleMenuClick} = useContext(MyContext);

    const [count, setCount] = React.useState(0);
    const [loading, setLoading] = React.useState(true);

    useEffect(() => {
        load();
    }, []);

    function load() {
        setLoading(true);
        unconfirmedCount().then(data => {
            setCount(data);
            setLoading(false);
        })
    }


    return (
        <Card raised sx={{padding: 2, boxSizing: 'border-box', width: '100%'}}>
            <CardHeader
                title={
                    <Stack direction="row" alignItems="center" spacing={1}>
                        <Typography variant="h5">销课</Typography>
                        {loading && <CircularProgress color="inherit" size={24}/>}
                    </Stack>
                }
                action={
                    <IconButton onClick={load}><RefreshIcon/></IconButton>
                }/>

            <CardContent>
                <Stack spacing={2}>
                    <Stack spacing={2} direction="row" alignItems="center">
                        <Typography>待核销课程</Typography>
                        <Stack spacing={2}>
                            <Chip color={count > 0 ? "primary" : "default"} label={count}
                                  onClick={count > 0 ? () => handleMenuClick(lessonComplete) : null}/>
                        </Stack>
                    </Stack>
                </Stack>
            </CardContent>
        </Card>
    );
}

export default UnconfirmedCount;
